<template>
  <div class="article-list">
    <mu-flex justify-content="center" wrap="wrap">
      <mu-card
        class="articlecard"
        :raised="true"
        v-for="item in articleList"
        :key="item.id"
      >
        <mu-card-media :title="item.title">
          <img :src="item.cover" />
        </mu-card-media>
        <mu-card-text>{{item.describle}}</mu-card-text>
        <mu-card-actions>
          <mu-button flat color="primary"  @click="toDetails(item.id)">阅读文章</mu-button>
        </mu-card-actions>
      </mu-card>
    </mu-flex>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: "测试文章",
          describle:
            "散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！",
          cover:
            "https://img0.baidu.com/it/u=2892421378,52470311&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=418",
        }, {
          id: 2,
          title: "测试文章",
          describle:
            "散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！",
          cover:
            "https://img0.baidu.com/it/u=2892421378,52470311&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=418",
        },
      ],
    };
  },methods:{
    toDetails(id){
       this.$router.push({
          path: `/articleDetails/${id}`,
        })
    }
  }
};
</script>

<style>
</style>